<template>
  <van-dialog v-model="show" title="买入" show-cancel-button @confirm="confirm">
    <van-cell-group class="mt-4">
      <van-cell value="">
        <template #title>
          <small class="text-sm text-gray-500">FCB</small>
          <van-icon
            class="mx-1 text-yellow-500 iconfont icon-bit-coin-line"
          ></van-icon>
          <big class="text-red-500">{{ row.coins }}</big>
        </template>
        <template #default>
          <small class="text-sm text-gray-500">收益</small>
          <van-icon
            class="mx-1 text-yellow-500 iconfont icon-bit-coin-line"
          ></van-icon>
          <big class="text-red-500">{{ profit(row.coins) }}</big>
        </template>
      </van-cell>
      <van-cell title="银行">
        <template #default>
          <span class="copy-btn" :data-clipboard-text="row.bank">{{
            row.bank
          }}</span>
        </template>
      </van-cell>
      <van-cell title="卡号">
        <template #default>
          <span class="copy-btn" :data-clipboard-text="row.bankcard">{{
            row.bankcard
          }}</span>
        </template>
      </van-cell>
      <van-cell title="姓名">
        <template #default>
          <span class="copy-btn" :data-clipboard-text="row.realname">{{
            row.realname
          }}</span>
        </template>
      </van-cell>
    </van-cell-group>
  </van-dialog>
</template>

<script>
import ClipboardJS from 'clipboard'
import XEUtils from 'xe-utils'

export default {
  data() {
    return {
      show: false,
      row: {},
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    },
  },
  mounted() {
    let clipboard = new ClipboardJS('.copy-btn')

    clipboard.on('success', e => {
      this.$toast.success('已复制')
      e.clearSelection()
    })

    clipboard.on('error', function(e) {
      console.error('Action:', e.action)
      console.error('Trigger:', e.trigger)
    })

    this.$once('hook:beforeDestroy', () => {
      clipboard.destroy()
    })
  },

  methods: {
    profit(coins) {
      const fee = XEUtils.multiply(coins, this.user.fee_ratio, 3)
      return XEUtils.add(fee, this.user.tip)
    },
    open(row) {
      this.row = row
      this.show = true
    },
    confirm() {
      this.show = false
      this.axios.put(`/buys/${this.row.id}/take`).then(res => {
        if (res.data.code === 1) {
          this.$toast.success('买入成功')
          this.$router.push('/my/buys')
          //   this.$emit('took', this.row.id)
        } else {
          this.$notify({
            type: 'danger',
            message: res.data.msg,
          })
        }
      })
    },
  },
}
</script>

<style>
</style>